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بسم | الرحمن الرحيم 


هذا الملف هو التالت في سلسلة تعليم ال ٣ع٥ممoاJdeve‏ 
و التي أحاول تقديمها للمطورين العرب 


وهي عبارة عن دروس مترجمة من موقع اوراكل . 


هذا الملف متاح للجميع النتفاع به , ولكن إذا تم نسخ أو نقل 
المادة , أرجو ذكر المصدر للحفاظ على المجهود المبذول فيه , 
وحزاکم الله خيراً 1 


أرخو من | القلى القدير أن ننف بهذا المجهود . 


م: أحمد عطااللة 


dev.ahmad3ttallahQ@Qyahoo.com 
http://hope-sun.blogspot.com 
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JavaServer Faces g EJB, JPA plخiwlı‎ JDeveloper 11 إنشاء تطبيق ويب ب‎ 


الهدف : 


سوف ننشئ تطبيق يب ب [08۷٤10٥8۲‏ . لإنشاء ا٤ك٥"‏ اة نستخدم مخطط ۴٤[86‏ مع 3.0 EJB‏ و Java)‏ 
Persistence API (JPA‏ . 

وبالنسبة للعميل نستخدم )J5S۴(‏ sعم۴ac‏ vaServerول‏ . صفحة اdetai-asterص‏ و صفحة تحریر سوق نضمنھم 
في واجهة المستخدم . 


الوقت المطلوب : 
ساعة واحدة . 
الموضوعات : 


1- سیناریو | 

2- المتطليات . 

3- إنشاء اتصال بقاعدة البيانات . 

. EJB Diagramer Îoxۃëiwn‎ EJB 3.0 ı Data Model ءli|‎ -4 
. إنشاء مشروع واجهة مستخدم جديد‎ -5 

. Page Flow ءli|‎ -6 

. Master-Detail JSF صخجة‎ ءlشiإ‎ -7 

8- إنشاء صفحة استعلام . 

9- ت تشغيا , صفحات 9۴ل . 

0- ملخص . 
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سيناريو العمل‎ 


„ EMPLOYEES و‎ DEPARTMENTS JglڏzlJ‎ persistence objects cliql جlaحi‎ 

. Entity Beans S oii »i persistence objects J| 

. employee ۾‎ department J| ٽlنilaبل‎ lpilشنiإ الافتراضية تم‎ ) setter و‎ egtter ( المسماة‎ Methods ال‎ 

هذه ال Methods‏ تم تنفیذھا كجزء من session b€an‏ . 

تم ننشئ صفaة Department J Master Detail JSF‏ و ال oyeesاEmp‏ المتعلقین بle‏ » وصذجة Edit JSF‏ 
تسمح بتحديث بيانات ال ع٤عoyامصem‏ . 
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المتطلبات‎ 


. Oracle JDeveloper 11g Production يجب أن يكون لديك‎ -1 

2 بجت أن يكون لديك e"2sعSch‏ eاSamp Oracle‏ المتضمن في 109 Oracle 11g database gl Oracle‏ .„ 
سنستخدم ۳a2عsc ۳R‏ .« خصوصا الصفحات التي تتعامل مع llنجدalوJ DEPARTMENT‏ و EMPLOYEES‏ .„ 
JDeveloper JI İl -3‏ . 


@ Oracle JDeveloper 11g 


Oracle JDeveloper 11g 


Model Applica 
Design Databases 
R Build Applications 


Integrate Applications 
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إنشاء اتصال بقاعدة البيانات 
ava Database Connectivity (JDBC)‏ هو ۸۴1 قياسي و المسئول عن عمل اتصال بين تطبيق ال J3۷2‏ و 
قاعدة البيانات آياً كانت (آوراكل آو غيرها) . في ال ۲عمهام۷ع0[ هناك وسيلة سهلة و بسيطة لإنشاء الاتصال 
و إدارته بالإضافة إلى اختبار هذا الاتصال وهي connection navigator J|‏ . 


1- اضغط على التبويب a†0۲و1اN2‏ مasطDatab‏ في مستكشف التطبيق » إذا لم يكن موجود يمكنك إظهاره 
بlختlaر View > Database Navigator‏ . 


File Edit Search Na¥vigate Run Debug 


E a 8 Options ظ‎ 


AApplicatio Application Navigator Ctrl+ Shift 
™ Application Server Navigator Ctrl+Shift-G 


®1 Database Navigator 


a IDE Database Reports 
@® Find DE Object 


Bf Component Palette Ctrl+Shift-P 
[} Resource Palette Ctrl+ Shift O 


. New Connection رiخzl,‎ IDE Connections JJعe‎ jal اضغط بزر الماوس‎ -2 


Import Connections 


3- في المربع انحوlري Create Database Connection Dialog‏ » في القسم الأول أدخل البيانات التالية : 


Connection Name HRConn 
Connection Type Oracle JDBC 
Username hr 

Password hr 

Save Password checked 
Deploy Password checked 


@: Create Database Connection 
Choose en application from the ist to cresbe 5 datoebase connection owned by ond deployed with 


that application. Choose IDE Connections bo craate a connection that can bê addêd bo any 
application 


Create Connection In: |@ IDE Cennectiens 


Coanection Nome: _HRConn 


Gonnection Type: Orade (JDBC 


Username: HF. Role: 


Password: [| Save Password |v) Deploy Password 


3- إنشاء تطبيق ويب ڊ 11ٺJDeveloper‏ ڊiwlخpl JavaServer Faces sg EJB, JPA‏ 
في كءوہا††مS‏ ( 208€ )J‏ eاOrac‏ ادخل القيم التالية : 


Driver thin 
Host Name ocalhost 
JDBC Port 1521 


مغ إكمال السانات كما قي إغداذات قاعذة السانات الخاصة بك 


Oracle (JDBC) Settings 
[_l Enter Custom 3D6C URL 
Driver: thin 


Hast Name: (localhost : 121 
٠ 3D: orc 


Test Connection hil -4‏ . لو أن قاعدة البيانات موجودة وبيانات الاتصال سليمة سوق تظهر لك الكلمة ! 
Success‏ . لو أن هناك خطأ تأكد من البيانات مرة أخرى ثم أعد الاختبار إلى أن يتم الاتصال ثم اضغط )© . 


| Test Connection 1 


Success 


5 aû IDE Connections 


»-@ RET 


هكذا تكون قد أنشأت الاتصال . 


جميع الحقوق محفوظة 


3- إنشاء تطبيق ويب EJB, JPA plخiwlı JDeveloper11 4ı‏ و JavaServer Faces‏ 
إliء« Data Model J|‏ ب 3.0 EJB Diagramer Îoıخiwم EJB‏ 
في الخطوات التالية سوف ننشئ تطبيق ب ۲عم0اعء۷عJ[0‏ مع ال املكم" اجه لهذا التطبيق . 


* إنشاء تطبيق جديد » ومشروع جديد . 

. Persistence Model J| ءli|‎ * 

* إنشاء ال اع Data Mod‏ و اختباره . 

* تشغيل ال اع٤dه‌M Data‏ خارج محتوىی Java EE‏ . 

„. EJB Session Beans jo ADF data controls sli] * 


إنشاء تطبيق حديد » ومشروع حديد 
New Application hedl -1‏ . 


ilApplication Navigator 8 


کس 
Neyo Ki‏ 


ammn 


2 Open Application... 


2- في المربع الحوlاري Create Applicai0¬‏ أدخل في الحقل عNa۳ Application‏ القيمة 
HR_EJB_JPA_App‏ . تم ادخل القيمة oracle‏ في Jl|lحJã Generic yiëzl . Application Package Prefix‏ 
Next hژéض›l pî Application‏ . 


@ Create Generic Application - Step 1 of 2 


Name your application 


dûpplkcatan Name: 
i Application Name FR_EB JPA ûap 
lu, Proiest Hone 
Directory: 


CC: OsvebperimyworkitR._ E18_PA_ûpp 


| | Applicaton Package Prefoc: 


orace 
| | Applkaton Template 


I Generic Application 1 
Creates anı apolcaliûon rtich indydas ã single projacl. Tha projek is rot 
preconfigured uth 1Develcper technologies, but can be aıstorized to rclude ary | 
tednolodas, | 
FÊ] Fusion Web Application (ADF) 
Creates a datar bourd ADF web applkcaton. The application ccoraits oF one project 


fot Ua viens and corr oler comporments (ADF Faces ary ADF Pagê Rû), ahd 
another project for the data zcdel (ADF Buaness Components) 


4 Java Dedtop Application 
Creates an application corflgured For budiding a generic Java application, The now: 


عد ] لض لصا 
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„. Finish »۾i‎ Project Name JقaãzJl‎ يرè‎ EJBModel ةميقلl ضع‎ Create Project يرlوحنl في الرمبع‎ -3 


@ Create Generic Application - Step 2 of 2 


Name your Generic project 


Prajert Naze: | Eemocel 


yı, ALolkation Hama 
EET Dirgctory:  [C:1DeveloperlmyvaxKiHR_EB_JPA_AppiEJBModel | rouse... 1 


[ Project Tednolcgiss 


ADF Dasktcp Integration 

ADF Faces 

ADF Lbrary web Application Support 
ADF Page Flow 

ADF Swang 

Ant 

B1 ADF Comporerks 

Database (Offine) إ۷‎ 


Tednology Description: 


ADF Business Components is the business services API ptovidad by Ue Oradea 
Application Oevelopmant Framewcrk (Orade ADE). ADF Business Camponerts 
reeTrR Tterartin hetwıaan Iha ratî nf ha Acı alinn acral thea cla dreerl n ha 


|< | [LGneh_] [Cancel 


. Database NaViga0r بيوgبتll‎ طخéضا|‎ -4 


iSlApplication Navi...  AjDatabase Navigator 


۲ 8 چا 


2-Ê IDE Connections 
ٍ --@ HRConn 


HR_EJB_JPA_Ãûpp 


5- اضغط على 1۸٤0۸٩‏ واسحبه وضعه في ۳۲ 1#_٤38_3۴۸_۸‏ لدعل هذا الاتصال متاح للتطبيق الذي 
أنشأئاة . 
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- r.1 IDE Connections 
أ‎ @ HRConn 
&4- ®] HR_E36_3PA_ûpp 


a-8 RET 


Persistence Model J| «ءliiإ‎ 


1- في مستكشف التطبيق » اضغط بزر الماوس الأيمن على امك ۴38M‏ واختر NeW‏ . 


E KAT 


Edit Project Source Paths... ۹ 


3¢ Delete Project 
Version Project... 


« Business Tier > EJB رjةiz+|‎ »تڙî‎ «. All Technologies بيوبتll اختر‎ . New Gallery في المربع الحواري‎ -2 
„ Entities from Tables تم اضغط مرتين على العنصر‎ 


JavaServer Faces و‎ EJB, JPA plدخiwlڊ‎ JDeveloper11 نشاء تطبيق ويب ب‎ 


@ New Gallery 


| A Tednobges li Grete Terebges | 
(® Search Al Tedncloglas 
Categories: Items: 


[-General E EE Data Control EB 2.) 
3 Business 


¦. ADF Business Components Ëğ E18 Diagram (PAE 3.0) 
8 Ey ® Entities from Tables 

Launches the Create Entities from Tables wizard, which‏ س 
٣ alows you to ceate PA/JEJS 3.0 entities or EJB 2.1 CMP‏ 
.esاbا‏ عدداھادل @ انع Seaurity eanliby bean r00‏ --` 


¦-- TopLink/ PA 
Web Services To enable this opëon, you must select a project in the 
Û -Cient Tier کے‎ 
® Entity 
Java Service Facade (JPAJ/TopLink) 
lû PA Mappings CM.) 


[Ê PA Persistence Desciptoc (persistence. onl) 


جميع الحقوق محفوظة 
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„ Next ۾i‎ « EJB 3.0 -- JPA Entities ji+خ|‎ Select EJB Versi0¬ يراlوحلا في المربع‎ -3 


Select EB Version 


JPAJEJB Version 
The JPA or EJB version has not yet been 


fw) Select EJB ¥ersion 
Persistence Linik 
۳ 


OEJB 2.1 -- E38 Entity Beans 


() EJB 3.0 -- JPA Entities 


„ Next »pi « Online Database Connection رië>l‎ Type of connection ةجéaص في‎ -Next . 5 م‎ -4 


Choose the type of connection, You can hoose from an online database connection, an 
offine database connecton and a data Source defined in an Appîkcation Server Connection, 


Oriîne Database Corneclion 


You can dhoose your tables from an onine Database Corneclion. 


„ Next pî « HRConn JlٔږإأتlJl‎ رi>خ|‎ Database Connection Details ةخفaص في‎ -6 
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Choose a database connection. 


Connection: +2۹4 
User Name: HR 
Oriver: oracle, jdbc, Or acleDriver 
Connect String: jdbc:oracle:thin: @localhost: 1521 :XE 


7- اضغط Que‏ لعرض کائنات ال HR schema‏ . تم اختر DEPARTMENTS‏ و EMPLOYEES‏ وانقلهم إلي 
قائمة كعاءعاعS‏ بالضغط على الزر اها î۾ Next‏ . 


sdhema: HR " Type Fiter: OFF | Bker Typas 1 


Namg Fiter: [4 | CDaiko-query |_guety 


ê DEPARTMENTS 
î EPLOYEES 


8- في هذه الخطوة تأكد من أن الحقل ع2۳" عوa)عمم‏ به القيمة oracle‏ « ثم اضخhط Finish ۾î Next‏ . 


Package Name: TEH 
Etitity Class Options 
Place member devel annotations on: &) Fields 


lw Implemank java.io. Serializable 


Collection Type for Relationship Fields: jeve.ubl.lit - 


9- في مستكشف النوافذ ستجد أن هناك ملف جافا واحد تم إنشاؤo‏ JکJ Departments jn‏ و 
Employees‏ . 
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0- اضغط الزر E.11‏ اا 52۷6- اضغط بزر الماوس الأيمن على عله ۴38M‏ في مستكشف التطبيق تم 
اختر NeW‏ . 


3 5 Edit Project Source 0 


3¢ Delete Project 
Version Project... 


12- في المربع الحواري e۷‌اا6a NeW‏ اختر E38‏ < ۲آ ssمsinیBu‏ . تم اضغط مرتین علی 


EJB Diagram JPA/ EJB 3.0 
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û: New Gallery 


Items: [] Show Al Descriptions 

Ll E15 Data C EJ 2 2^ 

E E38 Diagram (JPA/E38 3.0) 
Opens the COreate €1 Diagram dialog, in which 
you define the name and package for a new 
diagram. Use EJB dagrams to visually create, 
inspect, or update session beans, 
message-driven beans, entities, and the 
relationships between them, 


® Entities from Tables 

® Entity 

fğ] Java Service Facade (JPA TopLink) 
[Ê PA Mappings (ML) 


3- في المربع الحواري ٤(8 0i9"‏ ماعا . عذل الحقل ۵۳۴" إلى 3 38ع . متأكد من أن قيمة الحقل 
oracle aa Package‏ . 


@ Create EJB Diagram (JPA/EJB 3.0) 


Enter the details of your naw dagraî. 


Persistence " J| Jgıal Ok طéض؛›l‎ Associate Diagram With Persistence Unit يرlوحنlاl تم م0 « وفي المربع‎ 
„ Unit EJBModel " EJBModel.jpr 


@ı Associate Diagram With Persistence Unit %) 


Select a Persistence Unit that will be associated 
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IHR_EJB_JPA_App.jws 


| This diagram is 
associated with 
Persistence Unit 
EJBModel 


3Û Offine Database Sources 
E-I DAT ûsAsEı 
Ê-g em 


DEPARTMENTS 


6- يوضح الرسم الآن مكونات ال ۴(8 » أعد ترتيب الشكل ليكون الجدولين أفقيين مع اختيار العلاقات بينهم . 
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| ÎĞÎHR_EB_JPA_App.jws 


lompioyoes oracle Enpbyoes Wwe) 
emgioyeesL së! : pia u Ls korane b Erol 
losaionkd: ıa lang Long WN OF] 

ge Dep arımenttd( ) 


seOpanmenit( Lang dqaimntkl ) 
On ie : java sql mest amo N OP) 


U ; java. heg Strg RWCAA 
SName : java. hag Sng RWC 
a mkter : ıa hg Simg (WN. OAE 
ry : va lang ODoztle [RW. OR 


17- اضغط الزر اة م۷ة> 4 . 
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إنشاء مشروع جديد لواجهة المستخدم 


1- في شريط اسم التطبیق اضغط على İيترiڌ Application Menu‏ 


4 v Projects a RR Y7 س‎ ert Menu 
-- (a) EJBModel 


ثم اختر ct‏ ع ز٥۴٥ New‏ من القائمة التي ستظهر . 


Ltems: Show All Desopiions 

^ Î Gener Project 3 
Creates a basic project. The project ts not preconfigured with arf JDeveloper | 
bexchnologes bul Can be omlomted lo rxhade ary of lhe avalabie أ‎ 


TS] ADF Modal Praject 

Ê] apF Swing Project 

TÎ apr mewcontraler Project 

TI E18 Project 

TS] Exteneian Project 

| Î xve #eplceton Freject 

Î eva Prayect 

TÛ Project from Exetng Source 
: TS] rroject fram wan Fie 
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. Finish pî «< UserInterface JJ! Project Nane in Je Create PrOj€Cİ يرlوحنا في المربع‎ -3 


: serinterface| 
D: Bulldog HR_E8_JPA_App\UserInterface 


Framework (Orade ADF). ADF Business Components 


| ADF Business Components is the business services API provided by the Orade ك‎ 
| Application Development | 
| governs interaction between the rest of the application and the data stored in the vJ | 


4- في مستكشف التطبيق اضغط بزر الماوس الايمنj‏ leٹى Project Properties jil User1Interface‏ . 


HR_EJ8_JPA_Ap? §® Find Project Files 

7 Projects Show Overview 

a] EBModel > Run 

#-a] UserInterface ê M ake Ctrl-Fo 
Make Project Working Set 

Î Rebuild AIF 
Rebuild Project Working Set 

¥ Debug 
Deploy 


L§; Reformat Ctrl+Alt-L 


Organize Imports Ctrl+Alt-O‏ ا 


Compare With 
Replace with 


Restore from Local History... 


b Application Resources | „i 
e Project Properties... 
} Data Controls SS IESESEICESH 


5- في المربع الحواري الذي سيظهر اختر 5P rag Lib ars‏ ثم اختر Distributed libraries‏ تم اضغط علی الزر 


. Add 
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. ADF Faces Components 11 رڙjتخl‎ 1 ag من قائمة مكتبات ال‎ -6 


Choose Tag Libraries 


List of available JSP tag libraries compatible with 
Web Application version: Servlet 2, SSP 2. 1 (Java EE 1.5). 


`---gğ ADF Data Visualization 1.1 
----ğğ ADF Data Visualizations Core 1.1 
`---Bğ ADF Dynamic Components L1 


ADF Faces Components 11‏ 5-` ت 


E e 1.0 
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[E-- Project Source Paths 


[#1 Javadoc 


;.. Java EE Application 


i JSP Tag Libraries 


وهكذا تمت إضافة المكتبات إلى المشروع . 
7- مازلنا في شاشة Project Proper ies‏ › اختر rechnology scop»‏ »في قائہة ال e‌lۆAvaila‏ اختر J8۴‏ ثم 


انقلها إلى قائمة إ Sele‏ . 
لاحظ أن اختیار 5۴[ سوف يأخذ معه التكنولوجيات التي یتطلبها ایضا فسوف ننتتJ) (Java - JSP and Servlets‏ . 


@ Project Properties - D:\Bulldog\HR_EJB_.JIPA_AppWserinterface\Userinte. x< | 


E Technology Scope 


اضغ )ن :د اطا 


3- إنشاء تطبيق ويب EJB, JPA plدخiwlı JD eveloper11 4ı‏ و JavaServer Faces‏ 
8- يجب أن يكون مستكشف التطبيق كالتالي : 


2-û] UserInterface 
A- Web Content 


B-INF 
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إنشاء Page Flow i‏ 
سوف نستخدم S۴ Navigation Modeler‏ oper'sاeveط‏ اتخطيط و إنشاء صفحات التطبيق » و طرق التنقل بينها . 


faces-config.xml ۂjî‎ WEB_ INF ۂءî‎ Web Content ۃۂ؛î‎ User[Interfa ce zتil في مستكشف التطبيق‎ -1 
. pa9€ ۴|0۷ لفتح مخطط‎ 


® I ا‎ 


2 1 
ال ل 


De. EEE CE E REE 

HI-Ia| EBModel 

3-û] UserInterface 
A- Web Content 


E--{) WEB-INF 


faces-config. xml 


HB Page Flows 


2- سوف يظهر مخطط فار غ › لاحظ ال €††eاPa omponent‏ في یمین الشاشة › نستخدمھا لإنشاء مکونات ل J5۴‏ 
Navigation Model‏ . 


Û gg component Palette 


Q Ql <|inw-IM A 113 43 1Q ^Î [5F Diagram objects 


Drop objects from the 
Component Palette or 
Application Navigator here. 


3 اختر 5۴۴9e J5۴ Page‏ امن Component Pal ete‏ » ثم اضغط على المخطط حيث تريد أن تظهر الصفحة › غير 
اسم الصفحة إلى Ww se‏ ٥اط‏ . 


/browse 
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4- من Component Palette‏ › اسحب e€وھ۴P‏ 36۴ بجوار السابقة › ثم غیّر اسمھا إلى إ٣‏ مuي‏ . 


Navan Case JSF Navigation Case jii! -5‏ 2 من ال Component Palette‏ ۰ ثم اضغط علی صفحة 
۲0۷8 كي تكون المصدر ثم على صفحة ل٣‏ 8يا والتي تكون الوجهة لعملية التنقل . 


/browse 


6- عدل العنوان الافتراضي كءععع »اء بالضغط عليه ثم كتابة إ٣‏ هسي عليها » لاحظ أن هناك أيقونة تحذيرية فوق ال Navigati07‏ 
هك . هذا لأنك لم تنشئ بعد صفحات ال 5۴[ . وهذا يوضح أن ال عءه) 0۸أاجوا۷ج N‏ سوف تبحث عن الصفحات الغير 
موجودة . هذه الأيقونة سوف تختفي عند إنشاء تلك الصفحات . 


/browse query 


7- يعطيك ال ۲٥م‏ ٥اع‏ ۷ع 5[ ثلاث طرق لعرض الملف [71×. "۴g‏ هعءc-كععه]f‏ » إلى الآن استخدمنا عرض المخطط " 
"diagram view‏ . 

اضغط على التبويب ©۷٥١۷ W‏ أسفل الشاشة › ضم اضغط على sعاRu‏ ۸ 0أخهوآاهل في الجدول على اليسار لعرض ال 
Navigation Rules‏ . 


3- إنشاء تطبيق ويب EJB, JPA plخiwlı JDeveloضper11 ı‏ و JavaServer Faces‏ 
اضغط على التبويب ۲٣€‏ ا60 أسفل الشاشة » في الكود تجد وه < لآ- سء أ۷-١٣١f۲>‏ والذي يعرف صفحة المصدر »› ر -0خ 
t9‏ <4آ-سwعاV>‏ والذي يحدد صفحة الوجهة . 


Datart Page 
®: 3 
<l veraion="1,0" encoding="windowa=L252"?% 


E <facea-config VeIa310n-"1.2" xulnha="http: //Java., aun. cOon/XDL /n3/Javaee”> 
«<navigation-rule> 


<{rom-view-1id> /Drowse< /{ron-viewu-i4> 


<navigation- 
< {rOMm-OutLC 7 {rOn-OutLCOnE> 
xto-view-i to-view-id> 
</navigalLion-Case? 
` /navigat ion-ruleo 
</ faces-config> 


8- نرجع إلى عرض المخطط بالضغط على التبريب Component JI „١è JSF Navigation Case رlتëi pj¦ëټ Dia 9۲a‏ 
Palette‏ . 
نضغط على أيقونة صفحة المصدر u۷‏ ثم نضغط على أيقونة صفحة الوجهة browse‏ . 


9- عذل العنوان الافتراضي ععع »اء بالضغط عليه ثم كتابة مء س۷٥5۴‏ عليها . 


0- يجب أن يكون الشكل كالتالي : 


1- احفظ الكل ا , 


جميع الحقوق محفوظة 


JavaServer Faces و‎ EJB, JPA plدخiwlı‎ JD eveloper11 4ı إنشاء تطبيق ويب‎ -3 


Master-Detail JavaServer Faces حiص !ناء‎ 


Department ةحiصl‎ ADF Faces ĞGligكa‎ plدختulڊ‎ JavaServer Faces ٽIlھڪiص في الخطوات القادمة سوف ننشئ‎ 
. Employees Master Detail 


1- في مخطط ال ۴|٥۷‏ عو ه۴ ۰ اضغط مرتین بالماوس على أيقرنة ۵ئ Create JSF JSP Wizard رeظي ۲۴۳٣۷‏ . 


Enter the name, directory, and choose a type for the SF Page. Optionally 
reference a Page Template to indude its content in this page, or apply a Quick 
Start Layout to add and configure an initial set of layout components. 


Directory: [D:\PulldogHR_EJB_JPA_AppUser1nterface\public_html || Browse... 
[¥] Create as XML Document (*.jspx) 
[_] Render in Mobile Device 


initial Page Layout and Content 
@) Blank Page 

O Page Template | Oracie 

O Quick Start Layout 


ثم اضغط )0 » الآن لديك صفحة ×ط5ز. 5۲١۷58‏ خالية . في الخطوات القليلة التالية نضیف مکونات data-boUund ADF‏ 
۴۴5 إلى الصفحة . 
هذه المكونات تعرض القسم مع الموظفين المنتمين لهذا القسم . 


3- إنشاء تطبيق ويب EJB, JPA plدخiwlı JDeveloper11 4ı‏ و JavaServer Faces‏ 
3- في شاشة المکونات على يمين الشاشةۂ لمکتبة ال sمc‏ ھ۴ ۴ ۸D‏ › اختر قطاع ڄ 0u‏ ¥ھ| ثم اسحب Önllرj Panel Stretch‏ 
خ۷0uه LK‏ إلى داخل الشاشة . 


|B @casconfg.xmî | Elbrowse.jsox | ZlinîtialContext.java (OF 
A ~ Shon [Full Screen size > | [@] [None v[Defaut 


Type, paste, or drag and drop conient onto this blank 
page, ûr drag and drop a cCornponent from the palette 


الشاشة) . 


| HÛ cescomnfg.ım Hl brousejsor  BlInitaContext.java 
Bd - Show = Ful Screen size > | [@] [None > [Defeult 


mne renner rrmnmrerrenanremrennnnmmerrenmnmer 
1 


(BÎ Panel Tabbed 
[Z] Panel Window 


DepartmentsFindAlI| maul ۃjî‎ HRFacade Local ةılتlا وافتح القر ائم‎ Data Cont rھاs افتح مکون ال‎ -5 
. first facet ةشlش‎ Jلخاد‎ 


JavaServer Faces و‎ EJB, JPA plخiwlı‎ JD eveloper11 4ı إنشاء تطبيق ويب‎ -3 
. ADF Read-only For ثم‎ ۴0۲9s في القائمة المنبتقة التي ستظهر اختر‎ 


ADF Read-only Form... 


. Include Navigation Controls رlڍخئl‎ > « Edit Form Fields ةشlژ في‎ -6 
. ٥) ثم اضغط‎ 


@ Edit Form Fields 


configure the components that you want to display in your form. Note that you can remove or edit the 
resulting components after you dick OK. You can also add more components drectiy to the layout later. 


Value Binding 
ı depar imentid 
EM <default> 
<default> 


] indude Navigation Controls 


| Indude submit Button 


He 


7- في قائمة اأ Data Controls‏ اتح departments FindA||‏ تم اختر emn pماoyees kist‏ واسحبھا و ضعھا داخل 
lة second facet‏ . 


inputvaue)_ ې‎ 
Frsl Presous Next 


3- إنشاء تطبيق ويب EJB, JPA plخiwlı JDeveloper11 4ı‏ و JavaServer Faces‏ 
في القائمة المنبثقة التي ستظهر اختر sع|طTal‏ iî¦؛ۂۃ ADF Read-only Table‏ 


| | fr Panel Stretch Layout 


8- في المربع الحواري 0۸5 ں01٤‏ عاط ھ۲ Edit‏ امسح كل الأعمدة ما عدا الاعمدة التالية : 


commissionPct 
email 
employeeld 
firstName 
hiredate 

jobId 
lastName 
phoneNumber 
salary 


. Sorting : Row Selection juıllتll‎ jيرايخلا ثم حدد‎ 


@ Edit Table Columns 


[¥] Sqrting 


+% 


Orsplay Label Component To Use 

GR <default> A ADF Output Text 
<default> A ADF Output Text 
<defsult> Ã AOF Output Text 
E <default> A ADF Output Text 


<default> 
<defsult> 
EM <default> 
<default> 
GR <defoult> 


e 


جميع الحقوق محفوظة 


3- إنشاء تطبيق ويب EJB, JPA plدخiwlı JD eveloper11 ı4‏ و JavaServer Faces‏ 
یجب أن تكون الصفحة کالتالي 


#[...departmentld... #...depaı 
labe) inputValue} 


(...commissionPct}_ | #{...emai) 
{...commisSionPct) | #... emai) 


9- في شاشة ال ع٣ Struc u‏ على يمين lالشlشة‏ اتر Property Inspector | ةشlش „ès af:panelISplitter‏ في 
منتصف الشاشة › اجعل قيمة اlحJa‏ nټntati0 vertical Jl Orie‏ . 


جميع الحقوق محفوظة 


JavaServer Faces و‎ EJB, JPA plدخiwlı‎ JD eveloper11 4ı إنشاء تطبيق ويب‎ -3 


10- lختjر Property Inspector plدختulڊs Structure | al ja af:panelStretch Layout‏ » في الجزء 
الخاص ب عالإاك روفي ×80 اجعل قيمة الحقل Wİ‏ إلى 600 اع>ا۴ و ال tطوeiطH‏ إلى 400 اعxا۴‏ » لكي يظهر جدول ال 
esعoyام۴Mp‏ في محرر المخطط . 


. Department | قٽل ارتفاع مربع‎ -ı1 


5(.. deparimenlid.. lsbel) #{.. departmentid inça Ai Vake} 
#(...GeparimeriName.. label) #{.. departmentName input VY ahe)} 
#1. locotionid.. label) #{.. lbostionld input Vake} 


First Previous Ned Las 


4 


£1..comissionPet} | #(...eme#)} | #(..employeekd} | #(.. frstName) _ | #(..hireDete} 


£{. coemissionPcd)}) £(.. emad) 5(.. employeeld) 5(. frsiName) 5(.. hreOate 


3 af:panelStretchLayout 
E! ® Panel Stretch Layout facets | 


أ 


| a Go to Binding 
| KË Rebind to Another ADF Control 
El] af:paneispiitter - ve! ; 3 


JavaServer Faces و‎ EJB, JPA plدخiwlı‎ JDeveloper11 ı إنشاء تطبيق ويب‎ -3 


. Panel Collection jتèخl‎ Surround With يرlويحلنا في المربع‎ 


@ı Surround With 


Select the category of components from which you would like to find an item: 


ADF Faces vw 


^ 


1 


Select the item to be created: 
Panel Box 
@® Panel Dashboard 
Panel Form Layout | 
= Panel Group Layout 
*] Panel Header 
a Panel Label and Message 
3= Panel List 
Description: 
A panel component that aggregates collection components 


like table, tree Table and tree to display standard/application 


. ٥k) اضغط‎ 


3- هنا نحتاج اَن يتم تحديث قطاع ال كعمعرهام ”ع في هذه الصفحة عندما يتحرك المستخدم بين ال كئأ" ع" ممع المختلفة . 


عل ال Page Rendereing trigger‏ اه۴arti‏ لكي ينطلق يضغط المستخدم أي من تلك الزراير . 


اختر جدول ال s@عoyامem‏ . 


في شاشة اأ Properties InspeckOor‏ › اضغط ٤ dit‏ لخاصية ك٣‏ عو Parti a1۲ |g‏ الموجودة في 0٣‏ أا جع . ( زرار 
ال أ۴ موجود في أقصى يمين الحقل ) . 


JavaServer Faces و‎ EJB, JPA plخiwlı‎ JDeveloper11 4ı إنشاء تطبيق ويب‎ -3 


pî panelFormLayout - Departments ıi (facet (first zil Edit Property يرlويحنا في المربع‎ -14 
. لكي تعرض آزرار التصفح‎ مهneG‎ roup Layout û (facet (footer 


@ Edit Property: PartialTriggers 


Shute items from Avalable to Selected to define five kist of scoped ids for this component. 1f an item cannot be 
shuttled, it requires an Id or an ancestor naming container requires an Id. Note that scoped ids use a combination of 
relative and absokıte path references depending on thei rela ionship to the current component. 


/: Partial Triggers 


Shute items from Avadable to Selected to define te kist of scoped ids for this component. If an item cannot be 
shuttled, it requires an Id or an ancestor naming container requires anı Id. Note that scoped ids use a combination of 
relative and absokıte path references depending on their rela ionship to the current component. 


اضغط )0 ٠‏ الآن حينما يضغط المستخدم على أي من الأزرار الأربعة فإن قائمة ال ئsمعرهام ٠"‏ سوف يتم تحديثها لتعرض ال 
oyeesاp em‏ المنتمین إلى ال depart me"‏ المعروض . 


3- إنشاء تطبيق ويب EJB, JPA plدخiwlı 3D eveloضper11 4ı‏ و JavaServer Faces‏ 
ja -16‏ ن Component Palette‏ تحت Common Components JI‏ اختر ال.كرنj Menu Bar‏ |ا۴ane‏ واسحبهە 
إلى م٥۲‏ عع ه۴ في شاشة تصميم الصفحة . 


<default> (false) wv 
Partamiggers: [|v 


JavaServer Faces و‎ EJB, JPA plدخiwlı‎ JDeveloper11 4ı إنشاء تطبيق ويب‎ -3 


0- في ال Structure ۴a٥‏ › اضغط بزر الماوس الأیمن علی ں٥٥۳‏ :fھ‏ تم اختر من القائمة التي ستظہر ٤٣۵ئ1‏ 
Menultemn ۃî Inside af:menu‏ . 


insert gfter af:menu - ¬ Optons 


Design This Çontainer 

CofE... 

Facets - Panel Stretch Layout 

Hide in Design View 

Refagtor 

Greate Method Binding for AttributeChangeListener 


21- في ال Property 1!nspecto٣‏ وتحت التبويب €0۸1۸10۸© عل حقل ال ×ع۲ إلى إ٣‏ مQu‏ » ومن القائمة المنسدلة 
الخاصة بالحقل A۸٤10۸‏ اختر query‏ . 
[ieonatemeememeeRtennitsrtm test] 8‏ 


i IGE DO 


N N,‏ ای ا 


SelectedText: ب‎ 


Menu Action 


o Action: 1 


2 اضغط حفظ الكل ا . 


3- إنشاء تطبيق ويب EJB, JPA plدخiwlı JDeveloper11 4ı‏ و JavaServer Faces‏ 
إنشاء صفح Query and Edit‏ 
في الخطوات التالية سوف نستخدم ۴۵٤٥5‏ ۸5۴ لإنشاء 9٥‏ ھم ۲۷ عاو لتحریر البیانات . 


1- نعود إلى مخطط ال ۴٥W‏ عوه۴ (اضغط على التبریب |" ×. ۸۴19 0٥-5عc‏ هھ ) ثم اضغط مرتين على الأيقرنة إإ عاي . 


. Create as XML Document رlıخJ|‎ ددحiو‎ « quer¥.jspX jركı‎ jİ یجب‎ File ہame الحقل‎ 2 
Create JSF Page 


Enter the name, directory, and choose a type for the JSF Page. Optionally 
reference a Page Template to iIndude its content in this page, or apply a Quick 
Start Layout to add and configure an initial set of layout components. 


File Name: 
Directory: [D:1Buldog\HR_E)8B_JPA_App\UserInter face \pubkic_html 


[¥] Create as XML Document (*.jspx) 
[Render in Mobile Device 

inital Page Layout and Content 

&@) Blank Page 


O Page Template 
O Quick Start Layout 


ثم اضغط )0 . 


3- إنشاء تطبيق ويب EJB, JPA plدخiwlı JDeveloper11 4ı‏ و JavaServer Faces‏ 
3- صفحة تصميم جديدة سوف تفتح . في HRFacadeLocal jai Data Controls‏ 
|ختjر ng)‏ oyeesFindByName(StriاetEmp‏ و واسحبها داخل الصفحة . 


Type, paste, or 
page, or drag 4 


. ADF Parameter Form ıۃۂءî‎ Parameters رüخ|‎ « من القائمة التي ستظر‎ 


Methods 
Parameters 4 38| ADF Parameter Farm... 


Cancel 


4- في شاشة sل|عا۴ Edit ۴٥۳۳‏ اختر )© لقبول الحقول المقترحة . 


@ Edit Form Fields 


Confgure the components that you want to display in your form. Note that you can remove or edit the resulting 
components after you dick OK. You can also add more components directiy to the layout later, 


FX 2 
¢ 


getEmployeesFindByName 


3- إنشاء تطبيق ويب EJB, JPA plخiwlı JD eveloper11 4ı‏ و JavaServer Faces‏ 
6- في |آ Data Controls‏ اتح oyeesFiındByNameاEmp et‏ و تم اختر ۵٥0۷هام E"‏ اسحبه داخل الصفحة 
تحٽ Parameter FOr‏ . 


ADF Form... 


: حدد الخیارین‎ Edit ۴٥۲۳۳ ع۴‎ s في شاشة‎ -7 
. Include Submit Button ; Include Navigation Controls 


@ Edit Form Fields 


Confîgure the components that you want to display in your form, Note that you can remove or edit the resulng 
components after you dikk OK. You can also add more components directly to the layout later. 


Fields: م‎ 4 
Dişolay Label i Component To Usê 

E) <default> : J ADF Input Text w/ Label 
<default> ADF Inout Text w/ Label 

ER <default> j ADF Input Text w/ Label 

u) <defauit> j} ADF Inout Text w/ Label 
<defaut> El] ADF Inout Date w/ Label 


3 <defoult> JÈ ADF Input Text w/ Label 
<defaut> jı ADF Inout Text w/ Label 
TE) <defoult> J ADF Input Text w/ Label 
n <default> 3ë ADF Inout Text w/ Label 


[¥] fadude Navigation Controls 


lz) inde sıbmt Bıtton 
لے[‎ 


3- إنشاء تطبيق ويب EJB, JPA plدخiwlı JDeveloper11 4ı‏ و JavaServer Faces‏ 
8- تصميم الصفحة يجب أن يكون كالتالي : 


#...p_name...labe} #...p_name.input Value} 


#{...cOmmisSionPct...‏ ا 
#...emall...‏ 
#...employeekl...‏ 
š{...frstName‏ 
#...hireDate‏ 
#...jobkd‏ 
#...lastName...‏ 
%(...phoneNumber...‏ 
#(...SaBrYy...‏ 


9- هذه الصفحة نحتاج لأن يتم تحديثها تلقائياً بكي تحدد ذلك « |ختj „i (mergeEmployees(Em ployees‏ أ Data‏ 
sاContro‏ واسحبھا على الزر † Sub mi‏ . 


4(...jobld.. lube 
#1. hatiame abe] 
j  %..phonekumber. bel 
#[ salary abe 


في المربع الحواري ۸19| Edit Act|٥۸‏ » في القطاع Para nete‏ افتح القائمة تحت الحقل عم ںا۷a‏ ثم اختر Show‏ 


. EL Expression Builder 


Bindings | ji ADF Bindings zil Variaۆbles في المربع الحواري‎ -0 
. dataProvider jتè|‎ pۃî‎ currentRow ıۂî‎ queryEmployeesFindByNamelterator 


3- إنشاء تطبيق ويب EJB, JPA plدخiwlı JD eveloضper11 4ı‏ و JavaServer Faces‏ 
كلما اخترت نقطة من النقاط الموجودة في القائمة يقوم المحرر بإضافتها في مربع ال 0۸ Exp ٥55|‏ الموجود أعلى الشاشة . 


2 Variables 


Select values from variables and operators to create an expression or directly type the expression here: 


${bindings.getEmployeesFindByNamelterator .currentRow .dataProvider} 


اضغط )0 تم )0 مرة أخرى 


. Ok طiضl‎ Confirm Component Rebindi ng يرlويحنا في المربع‎ -1 


@ Confirm Component Rebinding 


The folowing component property values wil be overwritten if you change the data vale souroe, Select lhe Keep Current 
Vale dhedbox for any properties you don't want to change, then select OK to complete the rebinding operation. 


2- ارجع إلى صفحة ال اع Qu‏ واختر jllرlر mergeEmployees‏ . 


First Previous Next Last 


mergeEmployees 


13- وفي ال Property 1nspecأ0 r٣‏ اختر التبويب ۸۳07 K0‏ اجعل قيمة الحقل ۲٠×‏ إلى مه6 وفي القطاع 0۸ But‏ 
Action‏ اجعل الحقل 0ذخعA‏ إلى 0١‏ آجعA‏ من القائمة المنسدلة بجانبه . 


3 


a Action: 


<default> (fals |v 


14- احفظ الكل. 


5- صفحتك يجب أن تكون كالتالي : 


#...p_name,, label) #(...p_name.inputValue} 


#...commissionPct... 
#...email.. 
#...employeeld... 
#...firsiName... 


JavaServer Faces و‎ EJB, JPA plxخiwlڊ‎ JDeveloper11 4 إنشاء تطبيق ويب‎ 


جميع الحقوق محفوظة 


JavaServer Faces و‎ EJB, JPA plخiwlı‎ JD eveloper11 ı إنشاء تطبيق ويب‎ -3 
JS۴ تشغیل صفحة ال‎ 


الآن بعد أن تم بناء التطبيق »› نحتاج إلى اختباره . ال [Developer‏ يجعل اختبار application server Jڻںخ ja Î JSF JI‏ 
داخلي . هذا ال ۴٥۷٣ع‏ يتم إطلاقه تلقائيا عند اختبار صفحة من داخJ‏ أ JDeveloper‏ . 


الخطوات التالية تأخذك خلال عملية الاختبار . 


1- لاختبار الصفحات » ارجع إلى مخطط ال ۴|0۷ ع9هم » اضغط بزر الماوس الأيمن على أيقونة صفحة 56۵ W‏ 5۳0 » ثم اختر 
nہRu‏ من القائمة . 


Ctrl+Shift-F9 
Alt+Shift-F9 


JavaServer Faces و‎ EJB, JPA plدخiwlı‎ JDeveloper11 ı إنشاء تطبيق ويب‎ -3 


3- اضغط الزر × N‏ لعرض depart me"‏ وما فيه من sععoyامصء‏ . ثم اذهب إلى العمود f ٣ء N4۳6٠‏ واختبر الترتیب 
ascending /descen ding‏ باستخدام الأیقونتین 40W‏ / 10 . 


: بنفس الطريقة رتب الأعمدة كالتالي‎ -5 
... firstName, lastName, email, salary, hireDate, employeeld, commissionPct 


JavaServer Faces و‎ EJB, JPA plدخiwlı‎ JDeveloper11 ı إنشاء تطبيق ويب‎ -3 


6- في أعلى يسار الصفحة افتح القانمة إعمQu‏ <-- ك٣‏ 0خم © » تم انقل القائمة إلى أي مكان آخر في الصفحة » ثم اضغط الزرار 
Query‏ . 


7 صفحة ال ۷٣ع Qu‏ تفتح في المتصفح . ني name‏ _صByName_p‏ oyeesFindاueryEmplو‏ اکتب أي اسم أو جزء 
من اسم - ک ۸% - تم اضغط الزر u٥ ٣۷‏ . 


JavaServer Faces و‎ EJB, JPA plدخiwlı‎ JDeveloper11 ı إنشاء تطبيق ويب‎ -3 


8- جرب زراير التجول بين الحقول إذا كانت النتائج أكثر من سجل . 


AHUNOLD 


Alexander 


131990 


IT_PROG 
Hunold 
590.423.4567 


First | Previous | ت‎ | Last 
Save 


9000 


9- اضغط على أيقرنة ٣‏ 2 "عاج على يمين الحقل هخه 9© ٠۲ط‏ ومن الشاشة التي تظهر اختر تاريخ جديد . 


AHUNOLD 


Alexander 


_- 0 


amay [is |o 


SUN MON TUE WED THU FRI SAT 
31 1 3 5 ©6 


7 8 39 11% 12 13 
14 15 1© 18 19 20 
21 22 23 25 26 27 
28 29 30 1 ZF 3 


جميع الحقوق محفوظة 


JavaServer Faces و‎ EJB, JPA plخiwlı‎ 3D eveloper11 4ı إنشاء تطبيق ويب‎ -3 


0- بالضغط على الزر ه۷ ه8 تحفظ التعديلات التي تمت داخل قاعدة البيانات » ثم تعود بك إلى صفحة العرض . 


1- بفضل الله تم الانتهاء من هذا الدرس . 
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JavaServer Faces و‎ EJB, JPA plدخiwlı‎ JD eveloضper11‎ 4ı إنشاء تطبيق ويب‎ -3 
ملڅثص‎ 


في هذا الدرس قد أنشأنا تطبيق من البداية للنهاية باستخدام ^۸ Oracle JDeveloper, EJB 3.0, JP‏ 
و ئ€aمP‏ 5۴ ٠‏ لقد تعلمنا کیف : 


1- إنشاء اتصال بقاعدة البيانات . 

. ٤J6 و‎ ٤(6 3.0 باستخدام مخططات‎ Data Mod إنشاء ال‎ -2 
. Page Flow JI ناء‎ -3 

. Master- Detail JSF ةحiص‎ ءlشٿiإ‎ -4 

5- إنشاء صفحة Query‏ و Edit‏ . 

6 تشغیب صفحات ال J5۴‏ . 


جميع الحقوق محفوظة 


